import { Component, ViewChild, TemplateRef, ViewContainerRef, ElementRef } from '@angular/core';
import { TemplatePortal } from '@angular/cdk/portal';
import { OverlayService } from '@iux/live';

@Component({
  templateUrl: './demo1.component.html',
  styles: [
    `
      .ui-overflow {
        width: 230px;
        padding: 16px;
        overflow: auto;
        border-radius: 8px;
        background: #ffffff;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
      }

      .ui-overflow [lv-button] {
        float: right;
      }
    `,
  ],
})
export class Demo1Component {
  constructor(private viewContainerRef: ViewContainerRef, private overlayService: OverlayService) {}

  overlayRef;

  @ViewChild('template', { static: false }) template: TemplateRef<any>;
  @ViewChild('overlayBtn', { read: ElementRef, static: false }) overlayBtn: ElementRef<any>;

  openOverlay() {
    if (!this.overlayRef || !this.overlayRef.overlayRef.hasAttached()) {
      let portal = new TemplatePortal(this.template, this.viewContainerRef);
      this.overlayRef = this.overlayService.open(portal);
    }
  }

  close() {
    this.overlayRef.close();
  }
}
